<template>
    <div class="wrap-left-bottom">
        <div class="moudle-title">生 物 信 息</div>
        <div id="myChart-left-bottom" :style="{ width: '90%', height: '100%' }"></div>
    </div>
</template>
     
<script>
import { inject, onMounted } from 'vue'
export default {
    name: 'leftCenter',
    setup() {
        let echarts = inject('ec') //引入
        onMounted(() => {
            //需要获取到element,所以是onMounted的Hook
            let myChart = echarts.init(document.getElementById('myChart-left-bottom'))
            // 绘制图表
            myChart.setOption({
                backgroundColor: '',
                // title: {

                //     textStyle: {
                //         color: '#00FFFF',
                //         fontSize: 24
                //     }
                // },
                legend: {
                    top: 20,
                    textStyle: {
                        color: '#fff',
                    },
                    data: ['浒苔', '水母', '铜藻']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '10%',
                    containLabel: true
                },

                tooltip: {
                    show: "true",
                    trigger: 'item',
                    backgroundColor: 'rgba(0,0,0,0.7)', // 背景
                    padding: [8, 10], //内边距
                    extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
                    formatter: function (params) {
                        if (params.seriesIndex == "3" || params.seriesIndex == "4" || params.seriesIndex == "5") {
                            return params.name + '<br>' + params.seriesName + ' ： 第 ' + params.value + ' 名';
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#363e83',
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#363e83 ',
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#fff',
                            fontWeight: 'normal',
                            fontSize: '12',
                        },
                    },
                },
                xAxis: [{
                    type: 'category',
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#363e83',
                        }
                    },
                    axisLabel: {
                        inside: false,
                        textStyle: {
                            color: '#fff',
                            fontWeight: 'normal',
                            fontSize: '12',
                        },
                        // formatter:function(val){
                        //     return val.split("").join("\n")
                        // },
                    },
                    data: ['11:00', '12:00', '12:30','13:00']
                }, {
                    type: 'category',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    splitArea: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    data: ['11:00', '12:00', '12:30','13:00']
                },

                ],
                series: [{
                    type: 'bar',
                    xAxisIndex: 1,
                    zlevel: 1,
                    itemStyle: {
                        normal: {
                            color: '#121847',
                            borderWidth: 0,
                            shadowBlur: {
                                shadowColor: 'rgba(255,255,255,0.31)',
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowOffsetY: 2,
                            },
                        }
                    },
                    barWidth: '10%',
                    data: [30, 30, 30]
                }, {
                    type: 'bar',
                    xAxisIndex: 1,
                    barGap: '100%',
                    data: [30, 30, 30],
                    zlevel: 1,
                    barWidth: '10%',
                    itemStyle: {
                        normal: {
                            color: '#121847',
                            borderWidth: 0,
                            shadowBlur: {
                                shadowColor: 'rgba(255,255,255,0.31)',
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowOffsetY: 2,
                            },
                        }
                    },
                }, {
                    type: 'bar',
                    xAxisIndex: 1,
                    barGap: '100%',
                    data: [30, 30, 30],
                    zlevel: 1,
                    barWidth: '10%',
                    itemStyle: {
                        normal: {
                            color: '#121847',
                            borderWidth: 0,
                            shadowBlur: {
                                shadowColor: 'rgba(255,255,255,0.31)',
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowOffsetY: 2,
                            },
                        }
                    },
                }, {
                    name: '浒苔',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            show: true,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#f7734e'
                            }, {
                                offset: 1,
                                color: '#e12945'
                            }]),
                            barBorderRadius: 50,
                            borderWidth: 0,
                        }
                    },
                    zlevel: 2,
                    barWidth: '10%',
                    data: [8, 15, 10,12]
                }, {
                    name: '水母',
                    type: 'bar',
                    barWidth: '10%',
                    itemStyle: {
                        normal: {
                            show: true,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#96d668'
                            }, {
                                offset: 1,
                                color: '#01babc'
                            }]),
                            barBorderRadius: 50,
                            borderWidth: 0,
                        }
                    },
                    zlevel: 2,
                    barGap: '100%',
                    data: [8, 17, 26,10]
                }, {
                    name: '铜藻',
                    type: 'bar',
                    barWidth: '10%',
                    itemStyle: {
                        normal: {
                            show: true,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#1a98f8'
                            }, {
                                offset: 1,
                                color: '#7049f0'
                            }]),
                            barBorderRadius: 50,
                            borderWidth: 0,
                        }
                    },
                    zlevel: 2,
                    barGap: '100%',
                    data: [8, 17, 26,17]
                }

                ]
            })
            window.onresize = function () {
                //自适应大小
                myChart.resize()
            }
        })
    },
    components: {},
    mounted() { },
}
</script>
     
<style scoped lang='scss'>
.wrap-left-bottom {
    padding: 10px 0;
    width: 100%;
    height: 100%;

    .moudle-title {
        color: #50e9ff;
        font-size: 16px;
        text-align: center;
    }

    #myChart-left-bottom {
        margin: 0 auto;
    }
}
</style>